<template>
	<div class="all-goods">
		<div>
			<span>
				全部商品分类
			</span>
		</div>
	</div>
	<div class="all-goods-list">
		<div class="result-keyword">
			<span class="all-result-find">
				全部结果&nbsp;&nbsp;>&nbsp;&nbsp;
			</span>
			<span class="search-word">
				"{{ keyword }}"
			</span>
		</div>
		<div class="good-list">
			<div class="list-datil clearfix">
				<!-- {{ goodsListData }} -->
				<div class="every-good fl" v-for="(item,index) in goodsListData"
				:key="index">
					<div>
						<img :src="item.photo_URL" class="goods-image" alt="商品图片" />
					</div>
					<div class="price">
						￥{{item.price}}
					</div>
					<div class="name cs dian2">
						{{item.name}}
					</div>
					<div class="stock">
						库存:{{item.stock}}
					</div>
					<div class="add-cart" @click="addCart(item.good_id,1,'add')" cs>
						<el-badge class="ele">
							<span class="iconfont icon-gouwuche"></span>
						</el-badge>
						加入购物车
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {getGoodsListData} from "@/network/goods.js"
import { computed, onMounted, ref, watch } from "vue"
import { useRoute } from 'vue-router'
import { formEmits } from "element-plus"
import { updateCartGoodsNum } from "@/network/cart";

const route = useRoute()

let goodsListData = ref([])
const getSearchData=(keyword,page)=>{
	getGoodsListData(keyword,page).then(res=>{
		console.log(res.data);
		for(let i in res.data){
			goodsListData.value.push(res.data[i]);
		}
	}).catch((error)=>{
		print(error)
	})
}

onMounted(()=>{
	getSearchData(route.params.keyword,
	route.params.page)
})

let keyword=computed(()=>{
	return route.params.keyword;
})

let page=computed(()=>{
	return route.params.page;
})

watch(keyword,(newValue,oldValue)=>{
	getSearchData(newValue,1);
})

watch(page,(newValue,oldValue)=>{
	getSearchData(keyword.value,newValue);
})


const addCart=(good_id,num,action)=>{
	const data = {
		user_id:1,
		good_id:good_id,
		num:num,
		action:action
	}
	console.log(data);
	updateCartGoodsNum(data).then(res=>{
		if(res.status==3000){
			console.log(res.data);
			alert(res.data)
		}else{
			console.log(res.data);
			alert(res.data)
		}
	}).catch(err=>{
		console.log(err.data);
	})
}
</script>

<style lang="less" scoped>
	.all-goods{
		border-bottom: 2px solid #f30231;
		div{
			width: var(--content-width);
			margin: 0 auto;
			span{
				display: block;
				background-color: #f30231;
				color: white;
				font-size: 14px;
				height: 33px;
				width: 190px;
				line-height: 33px;
				text-align: center;
			}
		}
	}
	.all-goods-list{
		width: var(--content-width);
		margin: 0 auto;
		.result-keyword{
			margin-top: 20px;
			.all-result-find{
				color: #666;
				font-size: 12px;
			}
			.search-word{
				color: #666666;
				font-weight: 700;
				font-size: 12px;
			}
		}
		.good-list{
			.list-datil{
				.every-good{
					margin-top: 10px;
					border: 1px solid #fff;
					width: 238px;
					height: 345px;
					&:hover{
						border: 1px solid #e3e4e5;
					}
					.goods-image{
						margin-top: 10px;
						width: 220px;
						height: 220px;
					}
					.price{
						margin-top: 10px;
						color: #e4393c;
						font-size: 20px;
					}
					.name{
						margin-top: 10px;
						font-size: 12px;
						color: #666;
						&:hover{
							color: #e4393c;
						}
					}
					.stock{
						margin-top: 5px;
						margin-left: 5px;
					}
					.add-cart{
						margin-top: 5px;
						border: 1px solid #e4393c;
						text-align: center;
						cursor: pointer;
						.ele{
							width: 20px;
						}
						&:hover{
							color: #e4393c;
						}
					}
				}
			}
		}
	}
</style>